<template>
<div>
    <div class="slide">
      <img :src="testDetailObj.picture" />
      <span class="type" v-if="testDetailObj.type==='s'">特价众测</span>
      <span class="type" v-else>免费众测</span>
    </div>
    <div class="goods-detail">
       <h2>{{testDetailObj.title}}</h2>
       <p class="des">
       <span v-for="item in testDetailObj.subtitle">{{item}}</span>
       </p>
       <div class="time" v-if="testDetailObj.status===11||testDetailObj.status===23"> 
       <cite>已结束</cite>
       <span>剩余{{testDetailObj.countAvailable}}份</span>
       </div>
       <div class="time" v-else> 
       <cite><i>{{dd}}</i><b>天</b><i>{{hh}}</i><b>时</b><i>{{mm}}</i><b>分</b><i>{{ss}}</i><b>秒后结束</b></cite>
       <span>剩余{{testDetailObj.countAvailable}}份</span>
       </div>
       <div class="price"  v-if="testDetailObj.type==='s'">众测价格：<strong><b>¥</b><i>{{testDetailObj.salePrice}}</i></strong><span>¥{{testDetailObj.price}}</span><cite><i>{{testDetailObj.numberOfParticipants}}</i>人已参与测评</cite></div>
       <div class="price" v-else >众测价格：<strong><b>¥</b><i>{{testDetailObj.salePrice}}</i></strong><span>¥{{testDetailObj.price}}</span><cite><i>{{testDetailObj.numberOfParticipants}}</i>人已申请</cite></div>
    </div>
    <ul class="info" v-if="testDetailObj.type==='s'" style="display:-webkit-box;">
      <li style="-webkit-box-flex:1;"><i class="icon01"><img src="../../../assets/image/publicTest/info-icon01.png" /></i>低价购买</li>
      <li style="-webkit-box-flex:1;"><i class="icon02"><img src="../../../assets/image/publicTest/info-icon02.png" /></i>收获测评</li>
      <li style="-webkit-box-flex:1;"><i class="icon03"><img src="../../../assets/image/publicTest/info-icon03.png" /></i>提交报告</li>
      <li style="-webkit-box-flex:1;"><i class="icon04"><img src="../../../assets/image/publicTest/info-icon04.png" /></i>获得返利</li>
    </ul>
    <ul class="info" v-else style="display:-webkit-box;">
      <li style="-webkit-box-flex:1;"><i class="icon05"><img src="../../../assets/image/publicTest/info-icon05.png" /></i>免费申请</li>
      <li style="-webkit-box-flex:1;"><i class="icon06"><img src="../../../assets/image/publicTest/info-icon06.png" /></i>申请成功</li>
      <li style="-webkit-box-flex:1;"><i class="icon07"><img src="../../../assets/image/publicTest/info-icon07.png" /></i>到店体验</li>
      <li style="-webkit-box-flex:1;"><i class="icon08"><img src="../../../assets/image/publicTest/info-icon08.png" /></i>提交报告</li>
    </ul>
    <div class="test-people-list" v-if="GeekListObj.length>0">
    <h2 v-if="testDetailObj.type==='s'">众测达人名单</h2>
    <h2 v-else>成功入选名单</h2>
    <div class = "test-people-list-layout" :style="{height:peopleListHeight}">
      <ul>
        <li v-for="item in GeekListObj">
          <img :src="item.icon"/>
          <p>{{item.name}}</p>
        </li>
     <!--   <li>
      <img src="../../../assets/image/publicTest/pic01.png"/>
      <p>李嬷嬷</p>
           </li>
           -->
      </ul>
      </div>
<p v-if="GeekListObj.length>12" class="more" @click="showPeopleListMore"><span class="morespan" :class="{arrowUp:arrowUp}">{{showMore}}</span></p>

    </div>
    <div class="product-intro">
      <h2>产品介绍</h2>
      <div class="content" v-html="testDetailObj.detail">
         <!-- <img src="../../../assets/image/publicTest/banner02.png" /> -->
      </div>
    </div>
    <div v-if="!isApp" class="download-banner">
       <a :href="downloadUrl" ca="zc_v170628_zcdetail_appclick">
       <p>车享家APP</p>
       <p>立即参与众测吧</p>
       <span>前往</span>
       </a>
    </div>

  <div v-else>
   <div class="sub-layout" v-if="testDetailObj.status===10&&testDetailObj.type=='s'">
     <a @click="goGoodsDetailUrl(testDetailObj.targetURL)" ca="zc_v170628_zcdetail_lqclick">立即领取</a>
   </div>
    <div class="sub-layout" v-if="testDetailObj.status===11&&testDetailObj.type=='s'">
     <a :href="commondev+'/cx/cxj/cxjweb/publicTest/commentList/commentList.'+ isHtml +'?sid='+testDetailObj.sid" ca="zc_v170628_zcdetail_cpbgclick">查看测评报告</a>
   </div>
    <div class="sub-layout" v-if="testDetailObj.status===21&&testDetailObj.type!='s'&&!testDetailObj.participate">
     <a  @click="startApply" ca="zc_v170628_zcdetail_sqclick">立即申请</a>
   </div>
   <div class="sub-layout gray" v-if="testDetailObj.status===21&&testDetailObj.type!='s'&&testDetailObj.participate">
    <a href="javascript:void(0);">已申请</a>
      </div>
    <div class="sub-layout gray" v-if="testDetailObj.status===22&&testDetailObj.type!='s'">
     <a href="javascript:void(0);">申请已结束，测评中...</a>
   </div>
   <div class="sub-layout" v-if="testDetailObj.status===23&&testDetailObj.type!='s'">
     <a :href="commondev+'/cx/cxj/cxjweb/publicTest/commentList/commentList.'+ isHtml +'?sid='+testDetailObj.sid">查看测评报告</a>
   </div>
   </div>

   <a href="javascript:;" v-if="!isShowShareBtn&&isApp" class="shareGuide" @click="share"></a>
</div>
</template>

<script>
import common from "../../../assets/js/common.js";
import {Toast, Popup} from 'mint-ui';
import Vue from 'vue';
Vue.component(Popup.name, Popup);
export default {
    data: function() {
        return {
           freeTime:"",
           dd:0,
           hh:0,
           mm:0,
           ss:0,
           commondev:common.isdev(),
           isHtml:common.isHtml(),
           curdata:{},
           testDetailObj: {             // 众测活动项目        
              /* "sid": "s1",                   // 活动项目编号
               "type": "f",                   // 活动类别： s - 特价众测，f - 免费众测
               "targetURL": "http://xxx/xxxx...", // 目标商品页面网页
               "title": "车享定制雨刷",         // 标题
               "subtitle": ["高端无骨雨刷", "耐用、静音"],     // 副标题
               "picture": "http://xxxxx.png",  // 活动项目图片
               "total": 9999,                 // 总数（限量）
               "countAvailable": 60,          // 剩余数量
               "price": "396",                // 原价
               "salePrice": "80",             // 折扣价
               "timeToExpire": 123456,        // 活动结束剩余时间（毫秒），既“当前系统日期”到“结束日期“的相对时间差值
               "status": 22,                  // 活动状态（说明见备注）
               "memo": {                      // 活动备注
                  "icon": "http://xxxxx.png",   // 图标
                  "descr": " [敢写就敢送]活动期间xxxxx... "       // 描述（注：该文字中 #xxx# "#"之间的文字表示要显示为红色）
               },
        
               "numberOfParticipants": 1000,       // 已参与人数
               "detail":  "<html>xxxx...</html>"   // 详细描述（富文本）*/
            },
            GeekListObj: [/*{         // 人员名单列表
              "id": "001",      // 人员id
              "name": "xxxx",   // 人员名称
              "icon": "http://xxxx/xxxx.png"    // 人员头像
             },
             {         // 人员名单列表
                "id": "002",      // 人员id
                "name": "yyyyy",   // 人员名称
                "icon": "http://xxxx/yyyy.png"    // 人员头像
             },
             {         // 人员名单列表
                "id": "003",      // 人员id
                "name": "zzzz",   // 人员名称
                "icon": "http://xxxx/xxxx.png"    // 人员头像
             }*/],
             peopleListHeight:"",
             arrowUp :false,
             isApp:common.isApp(),
             downloadUrl:'//cxb.chexiang.com/service/version/getLatestAppVersion/0?channel=cx_cxj_xzy_0628_zc',
             isLogin:false,
             isShowShareBtn:common.checkAppversionIsGt35(),
             shareObj:{},
             signUrl:process.env.NODE_ENV == 'sit' ? common.isEnv("//recruit") : common.isEnv("//wx")  ,
             getDateUrl:common.isdev() + '/zhongce/content.htm',
             showMore:"查看更多",
             toShowMenu:false
        }
    },
    computed: {
     
    },
    mounted: function() {
      this.initData();
      this.initGeekList();
      var _this = this;
		//打点
		_this.$nextTick(function () {
			common.ANA_AnalyticsScan();
		});
    },
    components: {  },
    methods: {
      getQueryString:function(name) {
        var str = window.location.search.substr(1);
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = str.match(reg);
        if (r != null) return decodeURIComponent(r[2]); return null;
      },
      initData:function(){
           var sid = this.getQueryString("sid");
           console.log(sid);
           var _this = this;
           _this.$http.get(common.isdev()+"/zhongce/item.htm?sid="+sid+"&t="+Date.now()).then(function(d){
                var data = d.data,
                obj  = data.obj,
                errorCode = data.errorCode;
                if(errorCode === "1"){
                  _this.testDetailObj = data.obj;
                  var obj = _this.testDetailObj;
                  var ts = obj.timeToExpire;
                  _this.setDiscountTime(ts);
                  _this.ininShareData(data.obj);
               }
                //打点
				_this.$nextTick(function () {
					common.ANA_AnalyticsScan();
				});
            },function(err){
                if(err.status == 408){
                  Toast(err.status);
                }else{Toast("系统异常，请稍后再试");}
          })

      },
      initGeekList:function(){
           var _this = this;
           var sid = this.getQueryString("sid");
           _this.$http.get(common.isdev()+"/zhongce/participants.htm?sid="+sid+"&t="+Date.now()).then(function(d){
                var data = d.data,
                obj  = data.obj,
                errorCode = data.errorCode;
                if(errorCode === "1"){
                  _this.GeekListObj = data.obj; 
                  if(_this.GeekListObj.length>12){
                    _this.peopleListHeight = "16rem";
                  }
               }
                //打点
				_this.$nextTick(function () {
					common.ANA_AnalyticsScan();
				});
            },function(err){
                if(err.status == 408){
                  Toast(err.status);
                }else{Toast("系统异常，请稍后再试");}
          })
      },
      showPeopleListMore:function(){
         this.peopleListHeight == "auto"? this.peopleListHeight = "16rem":this.peopleListHeight = "auto";
         this.arrowUp = !this.arrowUp;
         this.showMore = this.arrowUp?"收起":"查看更多";
      },
      setDiscountTime:function(t){ 
            var _this = this;
            //var ts = ((new Date(2017, 6, 7, 7, 0, 0)) - (new Date()))/1000;//计算剩余的毫秒数  
            var ts = t/1000;//计算剩余的毫秒数  
            var lastTime = +new Date;    
            setInterval(function() {
              if(Math.abs(+new Date - lastTime) > 3000) {
                  console.log("从后台切回");                 
                  ts = ts - parseInt(Math.abs(+new Date - lastTime)/1000);
              }
              lastTime = +new Date;
             }, 1000);
            setInterval(function() {
                ts--;
                var dd = parseInt(ts  / 60 / 60 / 24, 10)<0?0:parseInt(ts  / 60 / 60 / 24, 10);//计算剩余的天数  
                var hh = parseInt(ts  / 60 / 60 % 24, 10)<0?0:parseInt(ts  / 60 / 60 % 24, 10);//计算剩余的小时数  
                var mm = parseInt(ts  / 60 % 60, 10)<0?0:parseInt(ts  / 60 % 60, 10);//计算剩余的分钟数  
                var ss = parseInt(ts  % 60, 10)<0?0:parseInt(ts  % 60, 10);//计算剩余的秒数  
                _this.dd = dd;
                _this.hh = hh;
                _this.mm = mm;
                _this.ss = ss;
                if (_this.toShowMenu) {
                  _this.toShowMenu = false;
                  _this.initData();
                  _this.initGeekList();
                }
                /*var discountTime = dd+"天"+hh+"小时"+mm+"分钟"+ss+"秒后结束";
                console.log(discountTime,"timeToExpire");*/
              // console.log(discountTime);
                //_this.testListObj[i].timeToExpire = discountTime;
               // console.log(_this.testListObj[i].timeToExpire);
            }, 1000);      
       },          
        checkLogin:function( fn ){
          var e = this;
          e.$http.get(common.isdev() + '/zhongce/checkLogin.htm?sid=' +e.testDetailObj.sid).then((d)=>{
            var result = d.body.result, url = d.body.msg;
            if(result == -99 ){
              window.location.href = url;
            }else{
              e.isLogin = true;
              if(typeof fn == "function") fn();
            }
          },(err)=>{
            Toast("网络异常");
          });
        }, 
        startApply:function(){
           var _this =  this;
           _this.checkLogin(function(){
           /* if(common.isdev()=="development"){
             window.location.href = common.isdev()+'/publicTest/freeTestSubmit/freeTestSubmit.'+ common.isHtml() +'?sid='+_this.testDetailObj.sid;
            }else{*/
           var h = '../freeTestSubmit/freeTestSubmit.'+ common.isHtml() +'?sid='+_this.testDetailObj.sid;
           /*if(_this.isShowShareBtn&&_this.isApp) {
              lb.newWebview({url:h},function (data) {
                if(data.errorCode == 0){
                  console.log("打开成功");
                }
              })
            }else{
              window.location.href = h;
            }  */
            _this.toShowMenu = true;
            window.location.href = h;
           // }
           })
        },
        goGoodsDetailUrl:function(url){
          var _this =  this;
          if(_this.isShowShareBtn&&_this.isApp) {
            lb.newWebview({url:url},function (data) {
              if(data.errorCode == 0){
                console.log("打开成功");
              }
            })
          }else{
            window.location.href = url;
          }
        },
        ininShareData:function(obj){
            var _this = this;  
            //window.document.title =  obj.title;  
           //分享数据配置
            _this.shareObj = {
              friend: {
                title:obj.title+",车享家请你来评测啦！",
                desc: "还在等什么？名额有限喔～",
                link: window.location.protocol + "//" + window.location.host + window.location.pathname + '?utm_source=share&sid='+obj.sid,
                imgUrl: window.location.protocol +obj.picture
              },
              friendQuan: {
                title:"",
                desc: obj.title+",车享家请你来评测啦！",
                link: window.location.protocol + "//" + window.location.host + window.location.pathname + '?utm_source=share&sid='+obj.sid,
                imgUrl: window.location.protocol + obj.picture
              }
            };
            if(!common.isApp()){  
              common.wxShare(_this);
            }else{
              if(_this.isShowShareBtn){
                _this.share();
              }
             // e.isShowShareBtn = !common.checkAppversionIsGt35();
            }    
        },
        share:function(){
           var _this = this;
           common.appShare(_this);
        }  
    }
}

</script>

<style lang="scss">
@import '../../../assets/css/common.scss';
@function rem($px){
  @return $px / 20 * 1rem;
}
body{
  background-color:#edf0f5;
}
.slide{
  position:relative;
  img{
    display:block;
    width:rem(750);
  }
  .type{
    display:inline-block;
    width:rem(133);
    height:rem(40);
    line-height:rem(40);
    background-color:#108ee9;
    text-align:center;
    color:#fff;
    font-size:rem(24);
    position:absolute;
    top:rem(25);
    left:rem(0);
    border-radius:0 rem(5) rem(5) 0;
  }
}
.goods-detail{
  padding:rem(20);
  background-color:#fff;
  border-bottom:1px solid #dddedf;
  h2{
    font-size:rem(38);
    padding:rem(10) 0;
  }
  .des{
    font-size:rem(24);
    margin-bottom:rem(26);
  }
  .time{
    font-size:rem(24);
    margin-bottom:rem(26);
    position:relative;
    i{
      display:inline-block;
      background-color:#375265;
      height:rem(30);
      line-height:rem(30);
      padding:0 rem(5);
      border-radius:rem(3);
      color:#fff;
      margin-right:rem(4)
    }
    b{
      margin:0 rem(5);
      font-weight:normal;
      color:#375265;
    }
    span{
      position:absolute;
      right:0;
    }
  }
}
.price{
  font-size:rem(32);
  position:relative;
  border-top:1px solid #f1f1f1;
  padding-top:rem(16);
  strong{
    font-weight:normal;
    color:#ff3b3b;
  }
  b{
    font-weight:normal;
  }
  span{
    font-size:rem(26);
    text-decoration: line-through;
    color:#afafaf;
    margin-left:rem(20)
  }
  cite{
    color:#595959;
    font-size:rem(20);
    position:absolute;
    right:0;
    i{
      color:#ff3b3b;
      font-size:rem(28);
    }

  }
}
.info{
  display:flex;
  flex-wrap:wrap;
  height:rem(110);
  line-height:rem(110);
  background-color:#fafbfb;
  margin-top:rem(16);
  li{
      margin-left:rem(22);
      font-size:rem(24);
      clear:both;
      overflow:hidden;
    i{
      display:block;
      height:rem(45);
      text-align:center;
      margin-right:rem(15);
      float:left;
    }
    i.icon01 img{
      width:rem(41);
    }
    i.icon02 img{
      width:rem(37);
    }
    i.icon03 img{
      width:rem(50);
    }
    i.icon04 img{
      width:rem(38);
    }
     i.icon05 img{
      width:rem(41);
    }
     i.icon06 img{
      width:rem(41);
    }
     i.icon07 img{
      width:rem(49);
    }
     i.icon08 img{
      width:rem(49);
    }
  }
}
.test-people-list{
  background-color:#fff;
  border:1px solid #dddedf;
  margin-bottom:rem(17);
  h2{
    font-size:rem(26);
    padding-top:rem(30);
    padding-bottom:rem(20);
    margin-left:rem(20);
  }
  ul{
    width:rem(750);
  }
  li{
    margin:rem(17);
    text-align:center;
    width:rem(90);
    float:left;
    img{
      width:rem(90);
      height:rem(90);
    }
    p{
      padding-top:rem(5);
      height: rem(31);
      overflow: hidden;
    }
  }
  .more{
    text-align:center;
    font-size:rem(24);
    color:#108ee9;
    height:rem(80);
    line-height:rem(80);
    img{
      width:rem(20);
    }
    i{
      margin-left:rem(10);
      display:inline-block;
      margin-top:-2px;
    }
    .morespan{
      display:inline-block;
      padding-right:rem(25);
      background:transparent url(../../../assets/image/publicTest/arrow.png) no-repeat right center;
      background-size:rem(20);
    }
    .arrowUp{
      background:transparent url(../../../assets/image/publicTest/arrowup.png) no-repeat right center;
      background-size:rem(20);
    }
  }

  .test-people-list-layout{
    overflow:hidden;
  }
}
.product-intro{
  background-color:#fff;
  h2{
    height:rem(80);
    line-height:rem(80);
    padding-left:rem(20);
    font-size:rem(26);
  }
  .content{
    padding:rem(20);
    padding-bottom: rem(115);
    min-height:rem(600);
    img{
       width:rem(710);
    }
  }
}
.sub-layout{
  width:100%;
  background-color:#fff;
  height:rem(118);
  padding:rem(15) rem(20);
  position:fixed;
  bottom:0;
  left:0;
  -webkit-box-shadow:10px 10px 10px 10px #999;  
  -moz-box-shadow:10px 10px 10px 10px #999;  
  box-shadow:10px 10px 10px 10px #999;   
  a{
     height:rem(88);
     display:inline-block;
     width:100%;
     text-align:center;
     background-color:#ff3b3b;
     color:#fff;
     line-height:rem(88);
     font-size:rem(34);
     border-radius:rem(10)
  }
}
.gray{
  a{
    background-color:#bfbfbf;
  }
}
.download-banner{
  width:100%;
  background-color:#fff;
  height:rem(118);
  padding:rem(15) rem(20);
  position:fixed;
  bottom:0;
  left:0;
  -webkit-box-shadow:10px 10px 10px 10px #999;  
  -moz-box-shadow:10px 10px 10px 10px #999;  
  box-shadow:10px 10px 10px 10px #999;   
  a{
     display:block;
     background:transparent url(../../../assets/image/publicTest/cxj-icon.png) no-repeat left center;
     height:rem(70);
     line-height:rem(36);
     background-size:rem(70) rem(70);
     font-size:rem(28);
     padding-left:rem(90);
     color:#108ee9;
     margin-top:rem(10);
     span{
       display:inline-block;
       width:rem(170);
       height:rem(60);
       border:1px solid #108ee9;
       border-radius:rem(10);
       text-align:center;
       line-height:rem(60);
       position:absolute;
       right:rem(20);
       top:rem(30);
     }
  }
}
.shareGuide{
  width:rem(100);
  height:rem(100);
  line-height:rem(100);
  text-align:center;
  color:$_fff;
  background:transparent url("../../../assets/image/publicTest/share-icon.png") no-repeat top left;
  background-size:100% 100%;
  border-radius:50%;
  position:fixed;
  right:rem(10);
  top:50%;
  z-index:3;
  font-size:rem(26)
}
</style>


